<template>
    <Cascader :value="value" :data="list" filterable @on-change='change' :transfer='false' :clearable='pClearable'  :change-on-select='pChange'></Cascader>
</template>
<script>
    import {GET_STATUS,GET_FAR_STATUS,GET_LAZY_STATUS} from 'serves/data-status'
    export default{
        name:'StatusLevelSelect',
        props:{
            pData:{
                type:Array,
                request:true
            },
            pName:{
                type:String,
                request:true
            },
            pDisabled:{
                type:Boolean,
                request:false
            },
            pKeyText:{
                type:String,
                default:'code'
            },
            pValueText:{
                type:String,
                default:'name'
            },
            pLazy:{
                type:Boolean,
                default:false
            },
            pDef:{
                type:Boolean,
                default:false
            },
            pFar:{
                type:Boolean,
                default:false
            },
            pClearable:{
                type:Boolean,
                default:false
            },
            pDel:{
                type:Array,
                default:function () {
                    return [];
                }
            },
            /*点击任意级都可以*/
            pChange:{
                type:Boolean,
                default:false
            },
        },
        data(){
            return{
                value:[],
                list:[],
            }
        },
        created(){
            this.init();
        },
        methods:{
            initText(value){
                this.$nextTick(()=>{
                    this.$set(this.$data,'value',value);
                })
            },
            setData(d){
                if(this.pDel.length>0){
                    d = d.filter((v,i)=>{
                        let z = true;
                        this.pDel.forEach((x,y)=>{
                            if(v[this.pKeyText]==x){
                                z = false;
                            }
                        });
                        return z;
                    });
                }
                this.$set(this.$data,'list',d);
                this.initText(this.pData);
                this.defChange()
            },
            init(){
                if(this.pFar){
                    this.setData(GET_FAR_STATUS(this.pName,false,this.pKeyText));
                }else {
                    if(!this.pLazy){
                        this.setData(GET_STATUS(this.pName,false,this.pKeyText));
                    }else {
                        GET_LAZY_STATUS(this.pName,false,this.pKeyText).then((res)=>{
                            this.setData(res);
                        });
                    }
                }
            },
            defChange(){
                if(this.pDef&&this.pData&&this.pData.length==0){
                    let arr = [];
                    const e_label = (data)=>{
                        if(data&&data.length>0){
                            arr.push(data[0].value);
                            e_label(data[0].children)
                        }
                    };
                    e_label(this.list,0);
                    this.value.splice(0,this.value.length);
                    this.change(arr);
                }else {
                    this.initText(this.pData);
                }
            },
            change(value){
                this.$emit('on-change',value)
            }
        },
        watch:{
            pData(newVal,olVal){
                if(newVal&&newVal.length==0){
                    this.defChange();
                }else {
                    this.initText(newVal);
                }
            }
        },
        components:{

        }
    }
</script>